<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
         title: {
                 text: ''
             },
             legend: {
                 data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
                 top: 'bottom'
             },
             radar: {
                 // shape: 'circle',
                 indicator: [
                     { name: '销售（Sales）', max: 6500},
                     { name: '管理（Administration）', max: 16000},
                     { name: '信息技术（Information Technology）', max: 30000},
                     { name: '客服（Customer Support）', max: 38000},
                     { name: '研发（Development）', max: 52000},
                     { name: '市场（Marketing）', max: 25000}
                 ]
             },
             series: [{
                 name: '预算 vs 开销（Budget vs spending）',
                 type: 'radar',
                 data: [
                     {
                         value: [4200, 3000, 20000, 35000, 50000, 18000],
                         name: '预算分配（Allocated Budget）'
                     },
                     {
                         value: [5000, 14000, 28000, 26000, 42000, 21000],
                         name: '实际开销（Actual Spending）'
                     }
                 ]
             }]
      })
    }
  }
}
</script>
